<template>
    <view class="content">
        <tab ref="tab" @tabChange="tabChange" :list="tabList"></tab>

        <view class="goods-list">
            <limit-item
                    v-for="(item, index) in tabList[active].list"
                    :item="item"
                    :key="item.gid"
					type="record"
                    @onCopySuccess="onCopySuccess"
            ></limit-item>

            <!-- 商品骨架 -->
            <template v-for="i in ['a', 'b', 'c', 'd']">
                <view class="skeleton-wrap" v-if="
					tabList[active].list.length === 0 &&
					!tabList[active].finished &&
					!tabList[active].empty">
                    <skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="4" avatarSize="254rpx"></skeleton>
                </view>
            </template>
        </view>
        <!-- 加载中插件 -->
        <view class="load-status">
            <load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
                       :contentText="contentText"></load-more>
            <load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
            <empty v-if="tabList[active].empty" emptyText="您没有相关的抢购记录~" emptyType="record"></empty>
        </view>

        <!-- 回到顶部 -->
        <view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
            <text class="iconfont icon-huidaodingbu"></text>
        </view>
    </view>
</template>

<script>
    import Tab from '@/components/Tab';
    import Empty from "@/components/Empty";
    import LimitItem from "@/components/LimitItem";
    import Skeleton from '@/components/uni/Skeleton';
    import LoadMore from "@/components/uni/LoadMore";
    import loader from '@/utils/mixin/loader';
	import moment from '@/utils/packges/moment';

    export default {
        name: 'record',
        mixins: [loader],
        components: {
            Tab,
            LoadMore,
            Empty,
            Skeleton,
            LimitItem
        },
        onLoad() {
            this.initPage();
        },
        methods: {
            initPage() {
                uni.showLoading({
                    title: '加载中...'
                });

                this.tabList[0].label = '全部';
                this.tabList[0].type = 0;

                let tabList = [{ label: '已抢购', type: 1 },{ label: '已过期', type: 2 }];

                tabList.forEach(item => {
                    item.loading = false;
                    item.finished = false;
                    item.error = false;
                    item.empty = false;
                    item.page = 1;
                    item.list = [];
                });

                this.tabList = this.tabList.concat(tabList);

                this.loadMore(this.tabList[0]);
            },
            beforeLoader() {
                if (this.active === 1) {
					this.params.startTime = moment().format('YYYY-MM-DD 00:00:00');
					this.params.endTime = moment().format('YYYY-MM-DD 23:59:59');
				}
				if (this.active === 2){
                    this.params.endTime = moment().subtract(1, 'days').format('YYYY-MM-DD 23:59:59');
                }
                this.params.isBybt = true;
                this.service = this.$service.million.goods.myFlashList(this.params);
                return true;
            },
			onCopySuccess(tkl) {
				my.navigateToMiniProgram({
					appId: '2018091261350219',
					path: `/pages/h5pages/h5pages?targetURI=${tkl}`
				});
			}
        },
    }
</script>

<style lang="scss" scoped>
    .content {
        .goods-list {
            padding: 0 20rpx;
            position: relative;
            .skeleton-wrap {
                background: #fff;
                margin-top: 20rpx;
                border-radius: 16rpx;
            }
        }
    }
</style>
